<template>
  <div>
    <div>
      <el-card style="margin-bottom: 10px">
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          "
        >
          <div>
            <div class="verticalBar"></div>
            <span style="color: #1074fd">视频管理</span>
          </div>
        </div>
      </el-card>
    </div>
    <div>
      <el-card>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="视频标题">
            <el-input
              placeholder="请输入"
              v-model="filterCondition.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="任务状态" label-width="100px">
            <el-select v-model="filterCondition.status" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-date-picker
            v-model="filterCondition.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="ml-16"
          >
          </el-date-picker>
        </el-form>
        <el-button type="primary" @click="navToCreateVideo0"
          >视频合成</el-button
        >

        <!-- <el-form :inline="true" :model="formData" style="display:inline">
          <div class="uploadVideo">
            <el-form-item label="">
              <el-upload
                ref="upload"
                :limit="1"
                action=""
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :http-request="httpRequest"
                :auto-upload="false"
              >
                <el-button type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <span class="ml-6 flex flex-col">
                <span class="text-sm text-red-600">注：上传数量有限制</span>
                <span class="text-sm text-gray-500"
                  >仅支持上传mp4/mov格式文件，单个文件不能超过50MB</span
                >
              </span>
            </el-form-item>
          </div>
        </el-form> -->

        <el-button type="primary" style="margin-left: 50px" @click="uploadVideo"
          >上传自定义视频</el-button
        >
        <el-button class="ml-96" type="primary" @click="filterVideo"
          >查询</el-button
        >
        <el-button class="" type="info">清空条件</el-button>
      </el-card>
    </div>
    <!-- <div style="margin-top: 8px">
      <el-card>
        
      </el-card>
    </div> -->
    <div class="mt-2">
      <el-card>
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
        >
          <el-menu-item @click="synthesisVideo" index="1"
            >合成视频库</el-menu-item
          >
          <el-menu-item @click="customVideo" index="2"
            >自定义视频库</el-menu-item
          >
        </el-menu>
        <el-table
          v-if="isSynthesis"
          :data="
            tableData.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          "
          border
          stripe
          style="width: 100%"
        >
          <el-table-column prop="id" label="ID" width="180"> </el-table-column>
          <el-table-column prop="name" label="视频标题" width="180">
          </el-table-column>
          <el-table-column prop="duration" label="时长"> </el-table-column>
          <el-table-column prop="status" label="任务状态"> </el-table-column>
          <el-table-column prop="createTime" label="合成时间">
          </el-table-column>
          <el-table-column prop="operations" label="操作" width="300">
            <template slot-scope="scope">
              <div class="text-center">
                <!-- <el-button type="primary" size="mini" @click="navToCreateVideo(scope)">修改</el-button> -->
                <el-button type="primary" size="mini" @click="showVideo(scope)"
                  >查看</el-button
                >
                <el-button type="danger" size="mini" @click="delVideo(scope)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="isCustom_div" v-if="isCustom">
          <div
            class="isCustom_video"
            v-for="(item, index) in materialVideoById.slice((currentPage1 - 1) * pagesize1,
              currentPage1 * pagesize1)"
            :key="index"
          >
            <video
              :src="item.url"
              controls
              muted
              class="
                vVideo
                object-fill
                w-24
                h-24
                rounded-md
                border-gray-300 border-2
              "
            ></video>
            <div>
              <span>{{ item.createTime }}</span>
              <button @click="deletecCustomVideo(item.id)" >删除</button>
              <!-- <el-button type="danger">删除</el-button> -->
            </div>
          </div>
        </div>

        <!-- <div
            v-if="isCustom"
            class="
              border-solid border-2
              rounded
              grid grid-cols-6 grid-rows-2
              justify-between
              tt
              isCustom_div
            "
          >
            <div>
            <video
              v-for="item in materialVideoById"
              :src="item"
              :key="item"
              controls
              muted
              autoplay="autoplay"
              class="object-fill w-24 rounded-md border-gray-300 border-2"
            ></video>
            </div>
          </div> -->

        <div class="text-center mt-2" v-if="isSynthesis">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pagesize"
            @current-change="current_change"
          >
          </el-pagination>
        </div>

        <div class="text-center mt-2" v-if="isCustom">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total1"
            :page-size="pagesize1"
            @current-change="current_change1"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <el-dialog
      :visible.sync="videoShow"
      width="40%"
      style="width: 2000px"
      class="rounded"
    >
      <div>
        <el-card style="margin-bottom: 10px">
          <div
            style="
              display: flex;
              flex-direction: row;
              justify-content: space-between;
            "
          >
            <div>
              <div class="verticalBar"></div>
              <span style="color: #1074fd">视频查看</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="middle_div ml-10">
        <div class="space-y-0.5 ml-10 jj">
          <!-- <span>视频</span> -->
          <video :src="showVideoSrc"></video>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import video from "@/network/api/video";

export default {
  data() {
    return {
      options: [
        {
          value: "0",
          label: "合成中",
        },
        {
          value: "1",
          label: "已合成",
        },
        {
          value: "2",
          label: "合成失败",
        },
      ],
      pagesize: 10,
      pagesize1: 20,
      currentPage: 1,
      currentPage1: 1,
      total: 0,
      total1: 0,
      showVideoSrc: "",
      videoShow: false,
      filterCondition: {
        status: "",
        time: "",
        name: "",
      },
      tableData: [],
      isSynthesis: true,
      isCustom: false,
      materialVideoById: [],
    };
  },
  methods: {
    navToCreateVideo0() {
      this.$router.push("/ems/VideoSynthesis/CreateVideo");
    },
    navToCreateVideo(scope) {
      localStorage.setItem("videoID", "" + scope.row.id);
      this.$router.push("/ems/VideoSynthesis/CreateVideo");
    },
    filterTable() {
      console.log(this.filterCondition);
    },
    current_change(currentPage) {
      this.currentPage = currentPage;
    },

    current_change1(currentPage1) {
      console.log(currentPage1);
      this.materialVideoById = []
      this.currentPage1 = currentPage1;
      this.queryCustomVideo()
    },

    queryVideo() {
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      const data = {
        organId: info.organId,
        name: "",
        status: "",
        startTime: "",
        endTime: "",
        pageSize: 100,
        pageNum: 1,
      };
      video.queryVideo(data).then((res) => {
        console.log(res.data.data.records);
        this.total = res.data.data.records.length;
        res.data.data.records.forEach((item) => {
          this.tableData.unshift(item);
        });
      });
    },

    queryCustomVideo() {
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      const data = {
        organId: info.organId,
        pageSize: 100,
        pageNum: 1,
      };

      video.queryCustomVideo(data).then((res) => {
        console.log(res.data.data.records);
        this.total1 = res.data.data.records.length;
        res.data.data.records.forEach((item) => {
          this.materialVideoById.unshift(item);
        });
        console.log(this.materialVideoById);
      });
    },

    filterVideo() {
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      const data = {
        organId: info.organId,
        name: this.filterCondition.name,
        status: this.filterCondition.status,
        startTime: "",
        endTime: "",
        pageSize: 100,
        pageNum: 1,
      };
      video.queryVideo(data).then((res) => {
        console.log(res);
        this.total = res.data.data.records.length;
        this.tableData = [];
        res.data.data.records.forEach((item) => {
          // this.materialVideoById.push(item);
          this.tableData.push(item);
        });
      });
    },

    delVideo(scope) {
      const data = {
        id: scope.row.id,
        deleted: "1",
      };
      video.delVideo(data).then((res) => {
        console.log(res);
        location.reload();
      });
    },

    showVideo(scope) {
      this.videoShow = true;
      console.log(scope);
      // this.showVideoSrc = scope.row.videoUrls[0];
      this.showVideoSrc = scope.row.url[0];
    },

    handleClose() {
      this.videoShow = false;
    },

    uploadVideo() {
      console.log("hhah");
      this.$router.push("/ems/VideoSynthesis/CustomUploadVideo");
    },

    synthesisVideo() {
      this.isSynthesis = true;
      this.isCustom = false;
    },

    customVideo() {
      this.isSynthesis = false;
      this.isCustom = true;
    },

    deletecCustomVideo(id) {
      console.log(id);
      const data = {
        deleted: 1,
        id: id
      }
      video.updateVideo(data).then(res => {
        console.log(res);
      })
    }
  },
  mounted() {
    this.queryVideo();
    this.queryCustomVideo();
  },
};
</script>

<style scoped>
.verticalBar {
  width: 3px;
  height: 18px;
  background: #1074fd;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  margin-top: 2px;
}

/deep/ .el-date-editor .el-range-separator {
  padding: 0;
}

.ml-96 {
  margin-left: 48rem;
}

.verticalBar {
  width: 3px;
  height: 18px;
  background: #1074fd;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  margin-top: 2px;
}

/deep/ .el-date-editor .el-range-separator {
  padding: 0;
}

.ml-96 {
  margin-left: 48rem;
}

.add_div {
  color: #1074fd;
  font-size: 30px;
}

.option_div {
  margin-right: 40px;
  margin-left: 40px;
}

.option_div:nth-child(1) {
  margin-left: 0;
}

.el-button_div {
  margin-left: 16rem;
}

.container {
  display: flex;
}

.container:nth-child(2) {
  margin-top: 40px;
}

.el-container_div {
  border: 1px solid rgb(161, 160, 160);
  border-radius: 7px;
}

.el-container_div {
  margin-left: 7rem;
  width: 400px;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

.middle_div {
  padding: 10px 40px 40px 40px;
}

.middle_div div {
  margin-top: 20px;
}

.middle_div span {
  font-weight: 500;
  color: rgb(16, 16, 16);
}

.isCustom_div {
  display: flex;
  flex-wrap: wrap;
}

.isCustom_video {
  width: 330px;
  border: 1px solid rgb(177, 174, 174);
  border-radius: 0.375rem;
  display: flex;
  font-size: 10px;
  align-items: flex-end;
  margin-left: 1.6rem;
}

.isCustom_video button {
  margin-left: 2px;
  background-color: red;
  border-radius: 0.375rem;
  color: white;
  width: 30px;
}

.vVideo {
  width: 170px !important;
  height: 100px;
}

.uploadVideo {
  display: inline !important;
  margin-left: 40px;
}

/deep/ .el-textarea__inner {
  height: 160px !important;
}

.el-icon-sort {
  margin-left: 20px;
  margin-right: 20px;
  transform: rotate(90deg);
}

/deep/ .el-dialog__header {
  background-color: white;
  padding: 0;
}

/deep/ .el-dialog__body {
  padding: 0;
}

/deep/ .el-card__body {
  padding: 13px;
}

.ml-10 {
  margin-left: 0rem;
}

.jj {
  text-align: center;
  /* display: inline; */
}

.jj video {
  /* text-align: center; */
  display: inline-block;
}
</style>

